<template>
  <div class="cart">
    <Header>
      <h3>购物车</h3>
    </Header>

    <section v-if="list.length">
      <div v-for="(item,index) in list" :key="index">
        <div class="item-content">
          <label for="" @click="selectItem(index)">
            <input type="radio" :checked="item.checked" />
          </label>
          <h3 @click="goDetail(item.goods_id)">
            <img :src="item.goods_imgUrl">
          </h3>
          <div>
            <p class="name" @click="goDetail(item.goods_id)">{{ item.goods_name }}</p>
            <p class="price" @click="goDetail(item.goods_id)">¥ {{ item.goods_price }}</p>
            <el-input-number v-model="item.goods_num" :min="1" @change="handleChange($event,index,item)"></el-input-number>
          </div>
          <div @click="deleteGoodsFn(item.id)"><i class="el-icon-delete"></i></div>
        </div>
      </div>
    </section>
    <section v-else>
      暂无数据 . . .
    </section>

    <footer v-if="list.length">
      <div>
        <p>共 {{ total.num }} 件</p>
        <p> 合计: <span>¥ {{ total.price }}</span> </p>
      </div>
      <div class="pay" @click="goPayment()">结算</div>
    </footer>
  </div>
</template>

<script>
import Header from "@/components/search/Header";
import {api1} from "@/common/api/request";
import {Toast} from "mint-ui";
import {mapMutations,mapState,mapGetters,mapActions} from 'vuex'
import router from "@/router";
export default {
  name: "cart",
  data(){
    return{
    }
  },
  computed:{
    ...mapState({
      list: state => state.cart.list,
      selectedList: state => state.cart.selectedList
    }),
    ...mapGetters(['total'])
  },
  components:{
    Header
  },
  created() {
    this.getData()
  },
  methods:{
    ...mapMutations(['initGetData','selectItem','addOrder']),
    ...mapActions(['deleteGoodsFn']),
    //请求数据
    getData(){
      api1({
        url: '/api/selectCart',
        method: 'POST',
        headers:{
          token:true
        }
      }).then(res => {
        res.forEach(v=>{
          v['checked'] = true
        })
        this.initGetData(res)
      })
    },
    //修改数量
    handleChange(value,index,item){
      //参数1:修改后的数量
      //参数2:index是下标
      //参数3:是商品哪个对象

      //发送请求
      api1({
        url: '/api/updateNumCart',
        method: 'POST',
        headers:{
          token:true
        },
        data:{
          goodsId: item.goods_id,
          goodsNum: value
        }
      }).then(res => {
        if(res.success){
          Toast(res.msg)
        }
      })
    },
    goPayment(){
      //1.判断
      if(this.selectedList.length === 0){
        return Toast('至少选择一件商品')
      }
      //2.发送请求 ==》后端给前端订单号【存储】
      api1({
        url:'/api/addorder',
        method:'POST',
        headers:{
          token:true
        },
        data:{
          list: this.list,
        }
      }).then(res => {
        //存储订单号
        this.addOrder(res)
      })
      //3.第二步 true 进行跳转页面
      this.$router.push({
        path:'/payment'
      })
    },
    goDetail(goods_id){
      this.$router.push({
        path:'/detail',
        query:{
          id: goods_id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  height: 48px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #F4F4F4;
  background-color: #FFFFFF;
  div>p>span{
    font-size: 18px;
    color: orangered;
  }
  .pay{
    height: 30px;
    width: 80px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #F4F4F4;
    background-color: orangered;
  }
}
.item-content{
  display: flex;
  justify-content: space-around;
  img{
    width: 80px;
    height: 80px;
  }
}
section{
  div{
    margin: 10px;
  }
  .item-content{
    display: flex;
    align-items: center;
  }
  .name{
    font-weight: 600;
  }
  .price{
    color: orangered;
  }
}
</style>